<template>
	<view class="map-container">
		<!-- 原生地图组件 -->
		<map id="myMap" style="width: 100%; height: 100%"></map>

		<!-- 场景核心：动态加载的 POI 图标 -->
		<view class="poi-container" :style="{ top: poi.y + 'px', left: poi.x + 'px' }">
			<!-- 加载中的占位符 -->
			<cover-view v-if="isLoading" class="poi-loading">加载中...</cover-view>

			<!-- 动态 POI 图标 -->
			<cover-image v-if="!isLoading" class="poi-icon" :src="poi.iconUrl" @load="onPoiIconLoad" @error="onPoiIconError"></cover-image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLoading: true, // 控制加载状态
			poi: {
				id: 1,
				name: '城市博物馆',
				x: 150, // 假设这是图标在屏幕上的x坐标
				y: 200, // 假设这是图标在屏幕上的y坐标
				iconUrl: '' // 初始为空，将从API获取
			},
			// **备用图标**：存放在本地，确保一定能加载成功
			fallbackIcon: '/static/default-poi.png'
		};
	},
	onLoad() {
		this.fetchPoiData();
	},
	methods: {
		fetchPoiData() {
			this.isLoading = true;
			// 模拟一个网络请求
			setTimeout(() => {
				// 假设从服务器获取到了数据
				const serverData = {
					// 故意使用一个可能失败的URL来测试 @error
					iconUrl: 'https://example.com/invalid-museum-icon.png'
				};

				// 更新 POI 的图标 URL
				this.poi.iconUrl = serverData.iconUrl;
			}, 1500); // 模拟1.5秒的网络延迟
		},
		onPoiIconLoad(e) {
			console.log('POI 图标加载成功！', this.poi.iconUrl);
			// **关键处理**：加载成功，关闭加载指示器
			this.isLoading = false;
		},
		onPoiIconError(e) {
			console.error('POI 图标加载失败！尝试加载备用图标。', e);
			// **关键处理**：加载失败，切换到本地的、可靠的备用图标
			this.poi.iconUrl = this.fallbackIcon;
			// 注意：这里我们没有立即设置 isLoading=false。
			// 因为切换到备用图标后，会再次触发加载流程。
			// 新的 src 会触发一次新的加载，最终会调用 onPoiIconLoad 来关闭加载状态。
			// 这是一个连锁反应，保证了流程的完整性。
		}
	}
};
</script>

<style scoped>
.map-container,
.poi-container {
	position: absolute;
	width: 100%;
	height: 100%;
}
.poi-container {
	/* 用于定位POI的容器，可以包含多个cover-view/cover-image */
}
.poi-loading,
.poi-icon {
	width: 48px;
	height: 48px;
}
.poi-loading {
	background-color: rgba(0, 0, 0, 0.6);
	color: white;
	font-size: 12px;
	text-align: center;
	line-height: 48px;
	border-radius: 50%;
}
</style>
